window.addEventListener("load", function () {
	// 导航列表绑定移入事件
	mousecolor($("header li"), "#00bdff", "#000");
	mousecolor($("header .active"), "#00bdff", "#00bdff");
	//导航登录、注册按钮
	mousecolor(
		$("header .login span:first-child"),
		"#fff",
		"#00bdff",
		"#00bdff",
		"#fff"
	);
	mousecolor(
		$("header .login span:last-child"),
		"#ed510a",
		"#fff",
		"#fff",
		"#ed510a"
	);

	// 导航列表跳转
	$("header ul li:first-child").addEventListener("click", function () {
		window.location.href = "../html/index.html";
	});

	// 给尾部相关链接添加交互效果
	mousecolor($("footer li a"), "#0e61d0", "#807570");

	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	//   功能一: 动态渲染API分类区
	// 1. 获取后台数据进行遍历
	let html = "";
	apiTypeData.forEach(function (v, i) {
		// 2. 遍历时拼接THML结构
		if (i === 0) {
			html += `<li class = "active" title = ${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class = "fw-bold" title = ${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title = ${v.keyword}>${v.name}</li>`;
		}
		//   3. 将拼接HTML结构放入对应位置
		$("#apiCateList").innerHTML = html;
	});

	// 功能二: API分类区点击后增加激活样式
	// 1. 获取相关节点
	$("#apiCateList li").forEach(function (v) {
		// 2. 给li绑定点击事件
		v.addEventListener("click", function () {
			// 3. 排他思想,清除其他激活样式li
			$("#apiCateList li").forEach(function (items) {
				items.classList.remove("active");
			});
			// 4. 在给当前点击对象添加激活样式
			v.classList.add("active");

			// 功能三: 点击API分类区的标签,联动下方搜索框
			// 1.将this的textContent赋值给strong
			$("#searchInput strong").textContent = v.textContent;
			// 2.将this的title赋值给input的value
			$("#searchInput input").value = v.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];

	// // 功能四: 卡片区动态渲染
	// // 1. 获取后台数据, 进行遍历
	// let cardsHTML = "";
	// listDataArr.forEach(function (v) {
	// 	// 2. 遍历时拼接为HTML结构
	// 	cardsHTML += `
	// 	<li class="rel">
	// 	${v.isSpecial ? "<span>企业专用</span>" : ""}
	// 	<img src="../imgs/${v.img}" alt="图片已损坏" />
	// 	<p>${v.name}</p>
	// 	<p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
	// 	<a href="#" class="abs">申请数据</a>
	// 	</li>`;
	// });
	// // 3. 将HTML结构放入指定位置
	// $("#apiCardsList").innerHTML = cardsHTML;

	// 功能五: 点击分页器的页码时, 增加激活样式
	// 1. 获取相关节点
	// 2. 给页码绑定点击事件
	$("#pageination ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			// 3. 点击后先清除全部按钮的激活样式
			$("#pageination ul li").forEach(function (item) {
				item.classList.remove("active");
			});
			// 4. 再给自己增加激活样式
			v.classList.add("active");
			render(Number(v.textContent), 5, listDataArr);
		});
	});

	//功能六: 点击分页器实现卡片区分页
	//复用封函数, 渲染函数
	//1. 实现基本功能
	//2. 确定函数名--render
	//3. 确定函数参数-- 当前页码pagination, 每页条数pageSize, arr
	// 当前页码,每页条数,原数据
	// (当前页码-1)*每页条数
	// 4.确定函数返回值--不需要
	// 5.将功能代码放入函数壳子,替换对应变量
	function render(pagination, pageSize, arr) {
		let startIndex = (pagination - 1) * pageSize;
		let result = listDataArr.slice(startIndex, startIndex + pageSize);
		let cardsHTML = "";
		result.forEach(function (v) {
			// 2. 遍历时拼接为HTML结构
			cardsHTML += `
		<li class="rel">
		${v.isSpecial ? "<span>企业专用</span>" : ""}
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class = ${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
		<a href="#" class="abs">申请数据</a>
		</li>`;
		});
		// 3. 将HTML结构放入指定位置
		$("#apiCardsList").innerHTML = cardsHTML;
	}

	// 6.调用测试
	render(1, 5, listDataArr); // 默认第一页为显示页
	// 7.优化代码

	// 功能一: 点击申请数据按钮弹出蒙层
	// 1.获取相关节点
	// $('#mask');
	// $('#apiCardsList')
	// console.log($("#mask"));
	// 2.给公共的祖先元素apiCardsList绑定点击事件,事件委派
	$("#apiCardsList").addEventListener("click", function (event) {
		// 3.根据事件的localName属性进行区分,a标签
		if (event.target.nodeName === "A") {
			// 4. 弹出蒙层
			$("#mask").style.display = "block";
			$("body").style.overflow = "hidden";
		}
	});

	// 5. 点击蒙层关闭蒙层
	$("#mask").addEventListener("click", function () {
		$("#mask").style.display = "none";
		$("body").style.overflow = "auto";
	});
	// 6.阻止登录框的事件传播
	$("#loginModal").addEventListener("click", function (e) {
		e.stopPropagation();
	});

	// 功能二: 点击模态框中的Tab按钮,对应按钮要激活,显示对应的form表单
	tabChange("#loginModalTab a", "active", "#loginModal form", "on");
	// console.log($("#loginModal form"));
	// $("#loginModalTab a").forEach(function (v, i) {
	// 	// 绑定点击事件
	// 	v.addEventListener("click", function () {
	// 		// 排他思想,移出所有激活样式
	// 		$("#loginModalTab a").forEach(function (item, index) {
	// 			item.classList.remove("active");
	// 			$("#loginModal form")[index].classList.remove = "on";
	// 		});
	// 		// 再给当前点击的a标签增加激活样式
	// 		v.classList.add("active");
	// 		// 显示对应的form表单
	// 		$("#loginModal form")[i].classList.add = "on";
	// 	});
	// });

	// 登录验证账号密码
	// 表单节点 $("#loginModal form:nth-child(3)")
	// console.log(">>>>", $("#loginModal form:nth-child(3)"));
	// 输入框节点 $("#loginUser input")
	// 密码节点 $("#loginPwd input")
	// console.log($("#loginPwd input"));
	// 绑定提交事件
	$("#loginModal form:nth-child(3)").addEventListener("submit", function (e) {
		// 判断用户名大于6位
		if ($("#loginUser input").value.length < 6) {
			$("#loginUser").style.borderBottom = "1px solid red";
			$("#loginUser input").nextElementSibling.textContent =
				"用户名至少6位以上";
			$("#loginUser input").nextElementSibling.style.color = "red";
			e.preventDefault();
		} else {
			$("#loginUser").style.borderBottom = "1px solid #e7e7e7";
			$("#loginUser input").nextElementSibling.textContent = "";
		}
		// 密码
		if (
			$("#loginPwd input").value.length < 9 ||
			$("#loginPwd input").value.length > 16
		) {
			$("#loginPwd").style.borderBottom = "1px  solid red";
			$("#loginPwd input").nextElementSibling.textContent = "密码9~16位";
			$("#loginPwd input").nextElementSibling.style.color = "red";
			e.preventDefault();
		} else {
			$("#loginPwd").style.borderBottom = "1px  solid #e7e7e7";
			$("#loginPwd input").nextElementSibling.textContent = "";
		}
	});
});
